<template>
  <div class="login-page">
    <el-card class="box-card">
      <img class="logo" :src="url" alt="" />
      <el-form class="el-card" :model="form" :rules="rules" ref="fff">
        <el-form-item prop="loginName">
          <el-input prefix-icon="el-icon-mobile" v-model="form.loginName" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" :type="flag?'password':'text'" v-model="form.password" placeholder="请输入密码">
            <i slot="suffix" :class="[flag?'el-icon-minus':'el-icon-view']" style="margin-top:15px;font-size:25px;" autocomplete="auto" @click="flag=!flag" ></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input prefix-icon="el-icon-lock" v-model="form.code" placeholder="请输入验证码">
            <!-- <i slot="suffix" :src="img" style="margin-top:15px;font-size:25px;" autocomplete="auto" @click="flag=!flag" ></i> -->
          </el-input>
          <!-- 验证码图片 -->
          <img class="codeimg" :src="pic" @click="getCodes">
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCode, login } from '@/api/user'
import { setUserName } from '@/utils/storage'
export default {
  name: 'login-page',
  data () {
    return {
      form: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: '',
        loginType: 0
      },
      url: 'http://likede2-admin.itheima.net/img/logo.595745bd.png',
      rules: {
        loginName: [
          { required: true, message: '请输入用户名', trigger: ['change', 'blur'] },
          { min: 5, max: 11, message: '长度为5-11位😙', trigger: ['blur'] } // trigger：触发条件
        ],
        password: [
          { required: true, message: '请输入用户名', trigger: ['change', 'blur'] },
          { min: 5, max: 11, message: '长度为5-11位😙', trigger: ['blur'] } // trigger：触发条件
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: ['change', 'blur'] }
        ]
      },
      flag: false,
      pic: ''
    }
  },
  mounted () {
    // 页面DOM挂载完之后获取验证码图片
    this.getPic()
  },
  methods: {
    // 每次点击时获取验证码图片
    getCodes () {
      this.getPic()
    },
    // 随机数
    getRandom () {
      //    随机数.     转成36位的字符串.截掉前两位
      return Math.random().toString(36).substring(2)
    },
    // 封装得到验证码的方法 在页面加载完毕后和每次点击图片的时候刷新
    async getPic () {
      this.form.clientToken = this.getRandom()
      // console.log(this.clientToken)
      const res = await getCode(this.form.clientToken)
      console.log(res)
      this.pic = window.URL.createObjectURL(res)
      // console.log(this.pic)
    },
    async onSubmit () {
      try {
        // 表单验证
        await this.$refs.fff.validate()
        // console.log(this.form)
        // 发生请求
        const res = await login(this.form)
        // console.log(res)
        // setUserId(res.userId)
        if (res.success === true) {
          this.$message.success(res.msg)
          setUserName(this.form.loginName)
          // setToken(res.token)
          this.$store.commit('user/setUserToken', res.token)
          this.$store.commit('user/setUserID', res.userId)
          this.$router.push('/')
        } else if (res.success === false) {
          this.$message.success(res.msg)
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png)
    no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .box-card {
    position: relative;
    overflow: visible;
    width: 520px;
    height: 380px;
    border-radius: 10px;
    .logo {
      position: absolute;
      width: 96px;
      height: 96px;
      left: 40%;
      top: -50px;
    }
    .el-card {
      margin-top: 50px;
      border: none;
      .el-form-item {
        line-height: 50px;
        position: relative;
        font-size: 14px;
        ::v-deep input {
          height: 50px;
        }

          .codeimg {
            position: absolute;
            top: 0;
            right: 0;
          }

        .el-button {
          width: 100%;
          height: 52px;
        }
      }
    }

  }
}
</style>
